<template>
  <section class="rescue-process py-5">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="section-header text-center mb-5">
            <p class="about_line"></p>
            <h2 class="about_h2">救助过程</h2>
            <p class="case_p">SALVAGE PROCESS</p>
          </div>
          
          <div class="row">
            <div 
              v-for="(process, index) in rescueProcesses" 
              :key="index"
              class="col-sm-6 col-lg-3 mb-4"
            >
              <div class="process-card text-center h-100">
                <div class="process-icon mb-3">
                  <img 
                    :src="process.icon" 
                    :alt="process.title"
                    class="img-fluid"
                    @error="handleImageError"
                  >
                </div>
                <h4 class="process-title mb-3">{{ process.title }}</h4>
                <p class="process-description">{{ process.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'RescueProcess',
  data() {
    return {
      rescueProcesses: [
        {
          icon: require('@/assets/images/20220716/1657970755117615.png'),
          title: '发现救助目标',
          description: '发现需要救助的动物我们会到达现场确认身体状况，如遇到受伤严重的宠物立即送到宠物医院进行抢救。'
        },
        {
          icon: require('@/assets/images/20220716/1657970871272062.png'),
          title: '医疗检查救助',
          description: '来到我们救助中心后，会寻找宠物医生对动物进行身体情况检查，发现动物身体出现疾病马上进行医治。'
        },
        {
          icon: require('@/assets/images/20220716/1657970920617143.png'),
          title: '安顿流浪动物',
          description: '宠物在检查或医治后会在流浪动物之家安顿下来，我们将一直喂养他们直到他们回到母星或者遇到有缘人。'
        },
        {
          icon: require('@/assets/images/20220716/1657970908832101.png'),
          title: '身体行为恢复',
          description: '动物们在动物之家安顿下来后会对他们进行观察，如出现应激行为的动物将会请训练师对他们进行行为恢复训练。'
        }
      ]
    }
  },
  methods: {
    handleImageError(event) {
      // 如果图标加载失败，隐藏图标并显示文字
      event.target.style.display = 'none'
      const parent = event.target.parentElement
      if (parent && !parent.querySelector('.icon-error-text')) {
        const errorText = document.createElement('div')
        errorText.className = 'icon-error-text'
        errorText.style.cssText = 'width:80px;height:80px;background:#04A07B;color:white;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:12px;margin:0 auto 20px;'
        errorText.textContent = '图标'
        parent.insertBefore(errorText, event.target.nextSibling)
      }
    }
  }
}
</script>

<style scoped>
.rescue-process {
  background: #f8f9fa;
}

.section-header {
  margin-bottom: 3rem;
}

.process-card {
  background: white;
  padding: 2rem 1.5rem;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  border: 1px solid #eee;
}

.process-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.process-icon img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.process-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 1rem;
}

.process-description {
  color: #666;
  line-height: 1.6;
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .process-card {
    padding: 1.5rem 1rem;
    margin-bottom: 1.5rem;
  }
  
  .process-icon img {
    width: 60px;
    height: 60px;
  }
  
  .process-title {
    font-size: 1.1rem;
  }
  
  .process-description {
    font-size: 0.9rem;
  }
}

@media (max-width: 576px) {
  .rescue-process {
    padding: 3rem 0;
  }
  
  .process-card {
    padding: 1.25rem 0.75rem;
  }
  
  .process-icon img {
    width: 50px;
    height: 50px;
  }
  
  .process-title {
    font-size: 1rem;
  }
  
  .process-description {
    font-size: 0.85rem;
  }
}
</style>
